<!DOCTYPE html>
<html>
  <head>
    <link rel="import" href="packages/irhydra/src/ui/tabs.html">

    <!--
      IRPane component comes with global CSS styles. See comments
      in irpane.html for details on why we are not using scoped styles
      for now.
      -->
    <link rel="import" href="packages/irhydra/src/ui/irpane.html">
    <link type="text/css" href="css/irpane.css" rel="stylesheet"/>

    <link rel="import" href="packages/irhydra/src/modes/v8/descriptions.html">

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <link href='http://fonts.googleapis.com/css?family=Roboto:900' rel='stylesheet' type='text/css'>

    <link type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/smoothness/jquery-ui.css" rel="Stylesheet" />
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>

    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/spin.js/1.2.7/spin.min.js"></script>

    <link type="text/css" href="css/hydra.css" rel="stylesheet">
  </head>
  <body>
    <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
          <a class="brand" href="#">IR Hydra</a>
          <a class="btn" on-click="openCompilation()">Load Compilation Artifacts</a>
          <template instantiate="if currentFiles != null">
            <a class="btn" href="#" on-click="reloadCurrentFiles();"><i class="icon-repeat"></i> Reload {{currentFileNames()}}</a>
          </template>
          <template instantiate="if currentMode != null">
            <a class="btn" href="#" on-click="openProfile()">Load Profile</a>
          </template>
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3">
          <div class="well sidebar-nav">
            <ul class="nav nav-list">
              <input id="methods-filter" type="text" class="search-query pull-left" placeholder="Filter methods">
              <ul class="nav nav-pills pull-right">
                <li class="dropdown">
                  <a id="sort-by" class="dropdown-toggle" data-toggle="dropdown" href="#">
                    sort by timestamp<b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu">
                    <li><a id="sort-by-timestamp" href="#">sort by timestamp</a></li>
                    <li><a id="sort-by-reopts" href="#">sort by reopts</a></li>
                  </ul>
                </li>
              </ul>
              <br style="clear: both;"/>
              <div id="methods">
              </div>
            </ul>
          </div><!--/.well -->
        </div>
        <div class="span9" id="main-pane">
          <template instantiate="if currentPhase != null">
            <div is="x-tabs" id="tabs">
              <div data-title="IR" data-href="ir">
                <div class="alert alert-block" style="display: none;" id="unmatched-deopt-warning">
                  <button type="button" class="close" on-click="$event.target.parent.style.display = 'none';">&times;</button>
                  <h4>Unable to match deopt to lithium</h4>
                  <p>This function has deoptimizations recorded but this phase does not contain information needed to match deopt position to LIR instruction</p>
                  <p>Make sure that you are using at least V8 3.17.1 and open <em>Code Generation</em> phase.</p>
                </div>
                <div class="ir-quick-links"></div>
                <div is="x-irpane" id="ir-pane">
                </div>
              </div>
              <div id="graph-pane" data-title="Graph" data-href="graph"></div>
              <template instantiate="if currentMode.supportedCodeModes.length > 1" class="after-tabs">
                <div class="btn-group">
                  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                    {{currentMode.codeMode}}
                    <span class="caret" style="border-top-color: black;"></span>
                  </a>
                  <ul class="dropdown-menu">
                    <template iterate="mode in currentMode.supportedCodeModes">
                      <li><a href="#" on-click="currentMode.codeMode = mode">{{mode}}</a></li>
                    </template>
                  </ul>
                </div>
              </template>
            </div>
          </template>
          <template instantiate="if currentPhase == null">
            <div class="hero-unit">
              <h1><span class="brand">IR Hydra</span></h1>
              <p class="lead">This is a tool that can display intermediate representations used by V8 and Dart VM optimizing compilers.</p>
              <p>It is mostly intended for compiler developers but can also be used by JavaScript/Dart developers investigating performance of their applications. Don't be surprised if it seems unfriendly or enters a strange state. Just refresh the page. Feel free to send questions and suggestions to <a href="mailto:me@mrale.ph">me@mrale.ph</a>.</p>
              <p>You can also try loading a sample <a href="#demo-1">demo file (v8 @ x64)</a> to explore IRHydra's features.</p>
              <p>How to obtain compilation artifacts:</p>
              <h2>V8</h2>
              <p>Run your application with <code>--trace-hydrogen --print-opt-code --code-comments --trace-deopt</code> and collect <code>hydrogen.cfg</code> file and data dumped into the stadard output.</p>
              <p><code>--print-opt-code</code> requires a special build of V8 with <code>v8_enable_disassembler</code> GYP variable set to <code>1</code>.</p>
              <p>When running in Chromium use <code>--js-flags="..."</code> to pass V8 flags and <code>--no-sandbox</code> to allow V8 to write <code>hydrogen.cfg</code>.</p>
              <p>V8 3.17.1 or newer is required to reliably map deoptimizations to lithium instructions when disassembly is not present. Alternatively you can just apply <a href="https://codereview.chromium.org/12217103">this</a> patch.</p>
              <h2>Dart VM</h2>
              <p>Run with <code>--print-flow-graph-optimized --disassemble-optimized --code-comments</code> and collect data dumped to the standard output.</p>
              <p>When running in Dartium use <code>DART_FLAGS</code> environment variable to pass flags.</p>
            </div>
          </template>
        </div>
      </div>
    </div>

    <div id="v8-ir-descriptions" is="x-v8-ir-descriptions"></div>

    <script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.js"></script>

    <script type="application/dart" src="hydra.dart"></script>
    <script type="text/javascript" src="packages/browser/interop.js"></script>
    <script type="text/javascript" src="packages/browser/dart.js"></script>

    <form id="compilation-artifact-form"><input type="file" id="compilation-artifact" multiple="multiple" style="opacity: 0;"></form>
    <form id="llprof-artifact-form"><input type="file" id="llprof-artifact" style="opacity: 0;"></form>

    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-6701581-5']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
  </body>
</html>
